<template>
  <h3>jsplumb使用 ( 多列 )</h3>
  <div id="container">
    <div class="col1">
      <div v-for="item in list1" :key="item.nodeId" :id="item.nodeId" name="source">{{ item.name }}</div>
    </div>
    <div class="col2">
      <div v-for="item in list2" :key="item.nodeId" :id="item.nodeId" name="center">{{ item.name }}</div>
    </div>
    <div class="col3">
      <div v-for="item in list3" :key="item.nodeId" :id="item.nodeId" name="target">{{ item.name }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import jsPlumb from 'jsplumb'
//jsplumb使用
let $jsPlumb = jsPlumb.jsPlumb;
let jsPlumb_instance = null; // 缓存实例化的jsplumb对象
const list1 = reactive([
  { name: "name1", nodeId: "name1" },
  { name: "name2", nodeId: "name2" },
  { name: "name3", nodeId: "name3" },
  { name: "name4", nodeId: "name4" },
  { name: "name5", nodeId: "name5" },
  { name: "name6", nodeId: "name6" }
]);
const list2 = reactive([
  { name: '数据2-1', nodeId: 'data2-1' },
  { name: '数据2-2', nodeId: 'data2-2' },
  { name: '数据2-3', nodeId: 'data2-3' },
  { name: '数据2-4', nodeId: 'data2-4' },
  { name: '数据2-5', nodeId: 'data2-5' },
  { name: '数据2-6', nodeId: 'data2-6' }
]);
const list3 = reactive([
  { name: '数据3-1', nodeId: 'data3-1' },
  { name: '数据3-2', nodeId: 'data3-2' },
  { name: '数据3-3', nodeId: 'data3-3' },
  { name: '数据3-4', nodeId: 'data3-4' },
  { name: '数据3-5', nodeId: 'data3-5' },
  { name: '数据3-6', nodeId: 'data3-6' }
]);

onMounted(() => {
  showPlumb();
})

const showPlumb = () => {
  jsPlumb_instance = $jsPlumb.getInstance({
    Container: 'container', // 选择器id
    EndpointStyle: { radius: 0.11, fill: '#fff' }, // 端点样式
    PaintStyle: { stroke: '#000', strokeWidth: 2 }, // 绘画样式，默认8px线宽  #456
    HoverPaintStyle: { stroke: '#1E90FF' }, // 默认悬停样式  默认为null
    Connector: 'Straight', // 要使用的默认连接器的类型：直线，折线，曲线等
    //  DrapOptions: { cursor: 'crosshair', zIndex: 2000 },
    ConnectionOverlays: [ // 此处可以设置所有箭头的样式，因为我们要改变连接线的样式，故单独配置
      ['Arrow', { // 设置参数可以参考中文文档
        location: 1,
        length: 10,
        paintStyle: {
          stroke: '#000',
          fill: '#000'
        }
      }]
    ]
  },)

  console.log(jsPlumb_instance)

  jsPlumb_instance.batch(() => {

    for (let i = 0; i < list1.length; i++) {
      initLeaf(list1[i].nodeId, 'source')
    }
    for (let i = 0; i < list2.length; i++) {
      initLeaf(list2[i].nodeId, 'center')
    }
    for (let i = 0; i < list3.length; i++) {
      initLeaf(list3[i].nodeId, 'target')
    }
  })


  jsPlumb_instance.bind('click', (conn, originalEvent) => {
    jsPlumb_instance.deleteConnection(conn)
  })

}

// 初始化具体节点
const initLeaf = (id, type) => {
  const ins = jsPlumb_instance;
  const elem = document.getElementById(id)
  if (type == 'source') {
    ins.makeSource(elem, {
      anchor: 'Right',
      allowLoopback: false,
      maxConnections: 1
    })
  } else if (type == 'center') {//中间列，即能主动连接，也能被动连接
    ins.makeSource(elem, {
      anchor: 'Right',
      allowLoopback: false,
      maxConnections: 1
    })
    ins.makeTarget(elem, {
      anchor: 'Left',
      allowLoopback: false,
      maxConnections: 1
    })
  } else {
    ins.makeTarget(elem, {
      anchor: 'Left',
      allowLoopback: false,
      maxConnections: 1
    })
  }
}

</script>

<style>
#container {
  position: relative;
  margin-top: 20px;
  width: 100%;
  height: 300px;
}

.col2,
.col1,
.col3 {
  float: left;
  text-align: center;
}

.col1 {
  width: 80px;
}

.col2 {
  width: 120px;
  margin-left: 80px;
}

.col3 {
  width: 120px;
  margin-left: 80px;
}

#container>div>div {
  line-height: 30px;
  margin: 0 0 17px 0;
  background: #ef631e;
  color: #fff;
}
</style>
